<template>
  <Header class="header">
    <div class="header-inner">
      <div class="logo" @click="$router.push('/')">
        <Icon :type="LogoKui" />
        <span class="wrap-name">
          <span class="name">K UIKIT</span>
          <span class="ver">v {{ version }}</span>
        </span>
      </div>
      <Divider type="vertical" />
      <div class="search-component">
        <Select placeholder="搜索..." shape="circle" :icon="Search" theme="light" :showArrow="false" filterable
          v-model="key" size="large" @change="change" :transfer="false">
          <Option v-for="(com, index) of menus" :key="index" :value="com.name">{{ com.title }} {{ com.sub }}</Option>
        </Select>
      </div>
      <Menu mode="horizontal" @click="go" class="top-menu" v-model="topMenu">
        <MenuItem key="home">首页</MenuItem>
        <MenuItem key="start">组件</MenuItem>
        <SubMenu key="docs" title="文档">
          <MenuItem key="/start/getting-started">快速开始</MenuItem>
          <MenuItem key="/start/ssr">SSR 支持</MenuItem>
          <MenuItem key="/start/language">多语言</MenuItem>
          <MenuItem key="/start/logs">更新日志</MenuItem>
          <MenuItem key="/start/theme">主题</MenuItem>
          <MenuItem key="/start/dark-mode">暗黑模式</MenuItem>
          <MenuItem key="https://v2.k-ui.cn/">v2.x 文档</MenuItem>
          <MenuItem key="https://react.k-ui.cn/">For React 文档</MenuItem>
          <MenuItem key="https://chuchur.com/">Blog</MenuItem>
        </SubMenu>
      </Menu>
      <ColorPicker class="theme" mode="rgb" v-model="themeColor" :showArrow="false" style="margin-left:8px"
        :noAlpha="true" @change="changeThemeColor" />
      <Tooltip :title="`切换${theme == 'dark' ? '浅色' : '暗色'}主题`" placement="bottom">
        <Button type="text" :icon="theme == 'dark' ? Sunny : Moon" @click="changeMode" size="large"
          style="margin:0 8px;" />
      </Tooltip>
      <Tooltip title="Jump to Gitee" placement="bottom">
        <Button @click="gitee" class="btn-gitee" :icon="LogoGitee" type="text" size="large"></Button>
      </Tooltip>
    </div>
  </Header>
</template>
<script>
import { menus } from "../menu";
import { LogoKui, ChevronDown, LogoGitee, Sunny, Moon, Search } from "kui-icons";
import pkg from '/package.json'
import Color from 'color'
export default {
  data() {
    return {
      LogoKui, ChevronDown, LogoGitee, Sunny, Moon, Search,
      themeColor: '#3a95ff',
      version: pkg.version,
      menus: menus.sort(),
      v: "3",
      key: "",
      topMenu: [],
      theme: '',
    };
  },
  mounted() {
    let theme = localStorage.getItem('theme-mode') || ''
    let themeColor = localStorage.getItem('themeColor') || ''
    if (theme) {
      document.documentElement.setAttribute('theme-mode', theme);
      this.theme = theme
    }
    if (themeColor) {
      this.themeColor = themeColor
      this.changeThemeColor(themeColor)
    }
    let path = this.$route.path
    this.topMenu = path == '/' ? ['home'] : ['start']
  },
  methods: {
    gitee() {
      window.open("//gitee.com/chuchur/kui-vue");
    },
    changeThemeColor(v) {
      let stl = document.querySelector('style[name=kui]')
      if (!stl) {
        stl = document.createElement('style')
        stl.setAttribute('name', 'kui')
        document.head.appendChild(stl)
      }

      // console.log(v)
      // return;
      const [r, g, b] = Color(v).rgb().array();
      // let str = v.slice(0, v.length-1)
      let cssText = `
      body[theme-type='custom']{
          --kui-color-main:rgba(${r},${g},${b});
          --kui-color-main-hover:rgba(${r},${g},${b},.9);
          --kui-color-main-active:rgba(${r},${g},${b},.75);
          --kui-color-main-10:rgba(${r},${g},${b},.9);
          --kui-color-main-30:rgba(${r},${g},${b},.7);
          --kui-color-main-60:rgba(${r},${g},${b},.4);
          --kui-color-main-80:rgba(${r},${g},${b},.2);
          --kui-color-main-90:rgba(${r},${g},${b},.1);
          --kui-color-hover:rgba(${r},${g},${b},.2);
          --kui-color-active:rgba(${r},${g},${b},.3);
          --kui-color-selected:rgba(${r},${g},${b},.1);
      }
      `
      stl.innerHTML = cssText
      document.body.setAttribute('theme-type', 'custom')
      localStorage.setItem('themeColor', v)
    },
    changeMode(event) {
      this.$Theme.setThemeMode(event, v => this.theme = v ? 'dark' : 'light')
    },
    go({ key, keyPath, item }) {
      if (key == "home") {
        this.topMenu = ['home']
        this.$router.push("/");
      } else if (key == 'start') {
        this.$router.push("/start/getting-started");
      } else {
        open(key);
      }
    },
    change({ value }) {
      let item = menus.filter(x => x.name == value)[0] || {}
      this.$router.push(`/${item.key}/${value}`);
      setTimeout(() => (this.key = ""), 500);
    },
    changeV({ value }) {
      if (value == "2") {
        open("https://v2.k-ui.cn");
      }
    },
  },
};
</script>
